import { ref, computed, reactive } from "vue";
import Time from "@/model/Time";

const ButtonNameMap = {
  start: "开始挑战",
  submit: "完成挑战",
};

const flagBtn = ref(true);
const btnName = ref(ButtonNameMap["start"]);

const timer = reactive(new Time());

const handleChallenge = () => {
  switch (flagBtn.value) {
    case true:
      flagBtn.value = !flagBtn.value;
      btnName.value = ButtonNameMap["submit"];
      timer.initTimer();
      break;
    case false:
      flagBtn.value = !flagBtn.value;
      btnName.value = ButtonNameMap["start"];
      timer.pauseTimer();
      break;
  }
};

const handleReset = () => {
  timer.resetTimer();
};

const hour = computed(() => {
  const hourStr = timer.formatHour();
  return hourStr;
});

const minute = computed(() => {
  const minuteStr = timer.formatMinute();
  return minuteStr;
});

const second = computed(() => {
  const secondStr = timer.formatSecond();
  return secondStr;
});

const millisecond = computed(() => {
  const millisecondStr = timer.formatMillSecond();
  return millisecondStr;
});

const timeText = computed(() => {
  const timeStr = timer.toString();
  return timeStr;
});

export {
  btnName,
  hour,
  minute,
  second,
  millisecond,
  timeText,
  handleChallenge,
  handleReset,
};
